/* Includes CSS rules for the interactive manual, which the regular manual will just ignore */
@font-face {
	font-family: 'TM';
	font-style: normal;
	font-weight: normal;
	src: local('Tunnel-maze'), url(../../font/Tunnel-maze.ttf);
}

#tunnels {
	width: 13cm;
	height: 11cm;
	position: relative;
	perspective: 75cm;
	perspective-origin: 200% -150%;
	margin-top: 2.75cm;
	margin-left: .5cm;
}

	#tunnels > * {
		position: absolute;
		top: 0;
		left: 0;
		transform-origin: 0 0 0;
		transform-style: preserve-3d;
		perspective: 75cm;
	}

	#tunnels > .symbol {
		font-family: TM;
		font-size: 25pt;
		background: white;
		border-radius: 40%;
		width: 1cm;
		height: 1cm;
	}
	.dark #tunnels > .symbol { background: #222; }

		#tunnels > .symbol > span {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

	#tunnels > .tunnel {
		width: 5cm;
		height: .1cm;
		background: #ccc;
		border-radius: .05cm;
	}
	.dark #tunnels > .tunnel { background: #777; }

	#tunnels > #man {
		width: 2cm;
		height: 2cm;
	}
		#tunnels > #man > .pic {
			position: absolute;
			width: 2cm;
			height: 2cm;
			background: url('../../img/3D Tunnels/stickman.png');
			background-size: 4cm 2cm;
			background-repeat: no-repeat;
			background-color: rgba(255, 255, 255, .5);
			border-radius: 40%;
			transform-style: preserve-3d;
			backface-visibility: hidden;
		}
		#tunnels > #man > #pic-front {
			background-position: 0 0;
		}
		#tunnels > #man > #pic-back {
			background-position: -2cm 0;
			transform: rotate3d(0, 1, 0, 180deg);
		}

#controls {
	float: right;
	clear: right;
	width: 4.2cm;
}

	#controls #moveNY {
		margin-left: 1cm;
	}

	#controls #moveNX {
		margin-left: .5cm;
	}

	#controls button {
		width: 1.5cm;
		height: 1.5cm;
		font-size: 21pt;
	}
	.dark #controls button { background-color: #BBB; }

#interactive {
	position: relative;
	min-width: 17.5cm;
}